<!-- InstanceBeginEditable name="Javascript" -->
<script language="javascript" type="text/javascript" src="<?php echo $this->config['js']; ?>/scrolltop.js"></script>
<link href="<?php echo $this->config['css']; ?>/slide.css" media="screen" rel="stylesheet" type="text/css" />
<div class="w980 left" id="box_hot_images_news">
<?php
if (!empty($this->arrDetail['hotalbum'])) {
    $arrAlbumResult = $this->arrDetail['hotalbum'];
    ?>
    <div class="content_box_images_news">
        <div class="v5-carousel enable-carousel" options="speed=700&auto=7000">
            <div class="big_slide">
                <div class="carousel-hero-holder">
                    <div class="carousel-hero-rail">
                        <?php foreach ($arrAlbumResult as $album) { ?>
                            <div class="carousel-hero-item hero-standard" type="standard">
                                <a href="<?php echo $this->Articleurl($album);?>" title="<?php echo $this->escape($album["title"]);?>" alt="<?php echo $this->escape($album["title"]);?>"><img width="634" height="480" title="<?php echo $album['title']; ?>" alt="<?php echo $album['title']; ?>" class="hero-img" src="<?php echo $this->Imageurl($album['thumbnail_url'], $this->imagesize['size7']); ?>" load="<?php echo $this->Imageurl($album['thumbnail_url'], $this->imagesize['size7']); ?>"/></a>
                                <h3 class=""><?php echo $album['title']; ?></h3>
                            </div>
                        <?php } ?>
                    </div>
                    <!--carousel-hero-rail-->
                </div>
            </div>
            <!--carousel-hero-holder-->
            <div class="carousel-list-holder">
                <ul class="carousel-list-rail">
                    <?php foreach ($arrAlbumResult as $album) { ?>
                        <li class="carousel-list-item carousel-list-t1 "> 
                            <a class="carousel-list-link" href="javascript:;">
                                <img src="<?php echo $this->Imageurl($album['thumbnail_url'], $this->imagesize['size3']); ?>" width="290" height="217" />
                                <span class="light"><?php echo $album['title']; ?></span>
                            </a>
                        </li>
                    <?php } ?>
                </ul>
            </div>
            <!--carousel-list-holder-->
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <?php
}
?>
</div>
<!-- InstanceEndEditable -->
<div class="w980 left">
    <div id="col_left" class="w670 left">
        <div id="cate_image_chuyenmuc" class="football box_width_common">
            <div class="title_cate">
                <p class="left">ẢNH THEO CHUYÊN MỤC</p>
                <div class="right w200">
                    <select class="left w180 select_category" onchange="return show_cate_photo(this.value);">
                        <option <?php echo ($this->arrCateMenu['catecode'] === "photo")? 'selected="selected"':'';?> value="<?php echo $this->arrCateMenu['category_id'];?>"  id="photo">Tất cả</option>
                        <?php if( !empty( $this->arrCateMenu['child'] )){
                            foreach ( $this->arrCateMenu['child'] as $cate ){
                        ?>
                        <option value="<?php echo $cate["category_id"];?>" id="bong-da-quoc-te" >&nbsp;&nbsp;&nbsp;<?php echo $cate["catename"];?></option>
                                <?php if( !empty( $cate['child'] ) ){
                                        foreach ( $cate['child'] as $key => $sub){
                                    ?>
                        <option value="<?php echo $sub["category_id"];?>" id="<?php echo $sub['catecode'];?>">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $sub["catename"];?></option>
                                <?php } } ?>
                        <?php } }?>
                    </select>
                </div>
            </div>
            <?php if(!empty ($this->arrDetail['album'])){?>

            <div class="content_box_photo box_width_common" id="div_list_new_photo">
                <ul class="" id="box_list_photo">
                    <?php foreach($this->arrDetail['album'] as $photo){
                        ?>
                    <li>
                        <div class="block_image_thumb"> <a href="<?php echo $this->Articleurl($photo);?>" title="<?php echo $this->escape($photo["title"]);?>" alt="<?php echo $this->escape($photo["title"]);?>" rel="example_group"><img src="<?php echo $this->imageurl($photo['thumbnail_url'], $this->imageSize['size5']);?>" width="207" height="155" title="<?php echo $photo["title"];?>" alt="<?php echo $photo["title"];?>" /> <span class="icon_photo">&nbsp;</span> </a> </div>
                        <h2> <a class="txt_black_hover_blue" href="<?php echo $this->Articleurl($photo);?>" title="<?php echo $this->escape($photo["title"]);?>" alt="<?php echo $this->escape($photo["title"]);?>"><?php echo $photo['title'];?></a> </h2>
                        <p class="txt_gray txt_11">Lượt xem: <?php echo $this->Articleview($photo); ?></p>
                    </li>
                    <?php } ?>
                </ul>
                <?php if( $this->total > LIMIT_NEW_PHOTO_SITE){ ?>
                <div class="more_bottom_detal box_width_common">
                    <div class="left"><a href="#wrapper_header" class="txt_gray" id="back-top"><span class="icon_portal_thethao icon_scrolltop">&nbsp;</span> Về đầu trang</a></div>
                    <div id="idLoadingPhoto" class="txt_view_more" style="display:none">Loading...</div><div class="txt_view_more" id="idShowmorePhoto"><a class="txt_gray" href="javascript:;" onclick="return show_more_photo();">Xem thêm<span class="icon_portal_thethao icon_view_more">&nbsp;</span></a></div>
                </div>
                <?php } ?>
            </div>
            <?php } ?>
        </div>
    </div>
    <div id="col_right" class="w300 right">
        <?php echo isset($this->layout()->_sections['layoutphoto_section_right_1'])?$this->layout()->_sections['layoutphoto_section_right_1']:''; ?>
    </div>
</div>
<?php $excluse = (isset($this->excluse) ) ? $this->excluse : ""; ?>
<input type="hidden" name="excluse" id="excluse" value='<?php echo $excluse; ?>' />
<!-- InstanceBeginEditable name="Javascript" -->
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/script.js"></script>
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/lib/lib.js"></script>

<script type="text/javascript" src="<?php echo $this->config['js']; ?>/slides.js"></script>

<script language="javascript" type="text/javascript" src="<?php echo $this->config['js']; ?>/slides.min.jquery.js"></script>
<script type="text/javascript" src="<?php echo $this->config['js']; ?>/jquery.popup.ad-gallery.js"></script>

<script language="javascript" type="text/javascript">
     $(document).ready(function() {
        $('.show_popup').live('click', function showPopup(){
            $('.main_ct_popup').fadeIn(0);
            var ctheight = $(window).height();
            var ctwidth = $(window).width();
            var ctpopupwidth = $('#gallery').width();
            var ctpopupheight = $('#gallery').height();
            /*get link share*/
            var shareUrl = $(this).attr('shareurl');
            window.location.href = '#'+shareUrl+'#!photo-0';
            /* Get albumId */
            var albumId = $(this).attr('aid');
            var albumName = $(this).attr('albumName');
            var url_loading = IMAGES_URL+'/loading.gif';
            /* Get album detail */
            
            $.ajax({
                type:'GET',
                url: '<?php echo BASE_URL ?>/block/getlistphoto',
                data:({
                    albumId:albumId,
                    albumName:albumName
                }),
                dataType:'html',
                beforeSend: function(){
                    $('#thumb-list').hide();
                    $('#ad-image div.ad-image').hide();
                    $('div.not-found').remove();
                    $('#ad-image').append('<img class="ad-loader" src="'+url_loading+'" style="border: medium none; display: block;">');
                },
                success:function(response){
                    if(response != ''){
                        $('#thumb-list').html(response).fadeIn('fast', function(){
                            var galleries = $('#gallery').adGallery();

                            $('#switch-effect').change(function() {
                                galleries[0].settings.effect = $(this).val();
                                return false;
                            });

                            $('#toggle-slideshow').click(function() {
                                galleries[0].slideshow.toggle();
                                return false;
                            });

                            $('#toggle-description').click(function() {
                                if(!galleries[0].settings.description_wrapper) {
                                    galleries[0].settings.description_wrapper = $('#descriptions');
                                } else {
                                    galleries[0].settings.description_wrapper = false;
                                }
                                return false;
                            });
                        });
                    }
                    else
                    {
                        $('img.ad-loader').remove();
                        $('#ad-image').append('<div class="not-found" style="border: medium none; width:100%; text-align:center; padding-top:250px; display: block;">Không có hình ảnh nào trong album</div>');
                    }
                },
                error:function()
                {
                    $('img.ad-loader').remove();
                    $('#ad-image').append('<div class="not-found" style="border: medium none; width:100%; text-align:center; padding-top:250px; display: block;">Có lỗi xảy ra</div>');
                }
            });
            
            $('.content_pupop').css("left",(ctwidth- ctpopupwidth)/2);
            $('body').css('overflow' , 'hidden');

            $('.btn_close_popup a').click(function(){
                $('.main_ct_popup').fadeOut(0);
                $('body').css('overflow' , 'auto');
            });
        });
    });
    /* load ajax + showmore photo list*/
    var url_showmore_photo = '<?php echo BASE_URL ?>/block/showmore';
    var limit_photo = '<?php echo LIMIT_NEW_PHOTO_SITE; ?>'
    var limit_photo_more = '<?php echo LIMIT_SHOWMORE_PHOTO_SITE; ?>'
    var page_photo = 1;
    var cateid_photo = <?php echo CATE_ID_PHOTO; ?>;
    var excluse = '';
    function show_cate_photo(cateid){
        page_photo = 1 ;
        cateid_photo = cateid;       
       
        $.ajax({
            type:'GET',
            url:url_showmore_photo,
            data:({
                page:page_photo,
                cateid:cateid_photo,
                limit:limit_photo,
                excluse:excluse
            }),
            dataType:'json',
            success:function(response){               
                if( response.html == ""){
                    $("#box_list_photo").html('<li><p class="txt_gray txt_11">Chuyên mục này chưa có album.</p> </li>');
                    $("#idShowmorePhoto").hide();
                }else{
                    $("#box_list_photo").html(response.html);
                    if( response.total >= limit_photo){                        
                        $("#idShowmorePhoto").show();
                    }
                }
                PVWidget.getViews();
            },
            beforeSend: function(){
                 $('#box_list_photo').html('<p style="padding-top: 10px; padding-left: 10px;" id="loading_video_id"> Đang tải dữ liệu...</p>');
            }
        });
    }
    function show_more_photo(){
        page_photo += 1; 
        $.ajax({
            type:'GET',
            url:url_showmore_photo,
            data:({
                page:page_photo,
                cateid:cateid_photo,
                limit:limit_photo_more,
                excluse:<?php echo $this->arrExcluse; ?>
            }),
            dataType:'json',
            success:function(response){
                $("#idLoadingPhoto").hide();                                             
                $("#box_list_photo").append(response.html);
                if( response.total >= limit_photo){
                    $("#idShowmorePhoto").show();
                }                   
                /*liad widget number view*/
                PVWidget.getViews();                
            },
            beforeSend: function(){
                 $("#idShowmorePhoto").hide();
                 $("#idLoadingPhoto").show(); 
            }
        });
    }
    $(document).ready(function(){
            // Loadding Popup
            $(".list_share_icon ul li .icon_letter").click(function(){
                    var domain = window.location.hostname;
                    var Url = window.location.hash.split('#/');
                    var shareUrl = domain + '/' + Url[1].substring(0,(Url[1].length));
                    
                    var albumTitle = $('#imgTitle').attr('title');
                    //centering with css
                    centerPopup();
                    $('#title_email').val(albumTitle);
                    $('#url').val(shareUrl);
                    //load popup
                    loadPopup();
            });

    });
    //SETTING UP OUR POPUP
    //0 means disabled; 1 means enabled;
    var popupStatus = 0;

    //loading popup with jQuery magic!
    function loadPopup(){
            //loads popup only if it is disabled
            if(popupStatus==0){
                    $("#backgroundPopup").css({
                            "opacity": "0.7"
                    });
                    $("#backgroundPopup").fadeIn("slow");
                    $("#popup_email").fadeIn("slow");
                    popupStatus = 1;
            }
    }

    //disabling popup with jQuery magic!
    function disablePopup(){
            //disables popup only if it is enabled
            if(popupStatus==1){
                    $("#backgroundPopup").fadeOut("slow");
                    $("#popup_email").fadeOut("slow");
                    popupStatus = 0;
            }
    }

    // Centering popup
    function centerPopup(){
            //request data for centering
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;
            var popupHeight = $("#popup_email").height();
            var popupWidth = $("#popup_email").width();
            //centering
            $("#popup_email").css({
                    "position": "fixed",
                    "z-index":99999,
                    "top": windowHeight/2-popupHeight/2,
                    "left": windowWidth/2-popupWidth/2
            });
            //only need force for IE6

            $("#backgroundPopup").css({
                    "height": windowHeight
            });

    }

    //Press Escape event!
    $(document).keypress(function(e){
            if(e.keyCode==27 && popupStatus==1){
                    disablePopup();
            }
    });
</script>